<script setup>
import ManageMap from "@/components/maps/ManageMap.vue";
import FactoryList from "@/components/display/FactoryList.vue";
import AmountChart from "@/components/charts/AmountChart.vue";
import geoData from "@/assets/address/data_geo.json";
import { ref, nextTick } from "vue";
import {
  basicInfoService,
  eachFoulPassingService /*达标率*/,
  foulContentService /*污染物分析*/,
  foulDosageService,
  foulAmountService /*污水处理量*/,
} from "@/api/country.js";
import { countryGetFactoryAPI } from "@/api/foulFactory.js";
import { xAxisFormatTime } from "@/utils/format.js";
import Panel from "@/components/myParts/OperationPanel.vue";

const props = defineProps({
  areaId: {
    type: String,
    default: "",
  },
});

// 地图相关子页面刷新
const isMapSonActive = ref(false);
const mapReload = () => {
  isMapSonActive.value = false;
  isMapSonActive.value = true;
  return new Promise((resolve, reject) => {
    resolve();
  });
};
// 水体相关子页面刷新
const isWaterSonActive = ref(false);
const waterReload = () => {
  isWaterSonActive.value = false;
  nextTick(() => {
    isWaterSonActive.value = true;
  });
};

const countryIds = ref([]);

const aName = ref("");
const bName = ref("");
const cName = ref("");
const geoCenter = ref([]);
const mapRef = ref(null);
const factories = ref([]);
let positions = [];
const initArea = async () => {
  geoData.some((item) => {
    if (String(item.value) === props.areaId.slice(0, 2)) {
      aName.value = item.label;
    } else if (String(item.value) === props.areaId.slice(0, 4)) {
      bName.value = item.label;
    } else if (String(item.value) === props.areaId) {
      cName.value = item.label;
      geoCenter.value = item.geo.split(" ");
    }
  });
  let params = { countryId: countryIds.value[0] };
  const res1 = await countryGetFactoryAPI(params);
  factories.value = res1.data.data;
  // 地图上显示水厂位置
  for (let i = 0; i < factories.value.length; i++) {
    positions.push(factories.value[i].position);
  }
};

const passing = ref(0);
const basicInfo = ref({
  sources: 0,
  foulFactories: 0,
  pressures: 0,
  population: 0,
});
const amount = ref({});
const amountArr = ref([]);
const dosage = ref({});
const dosageArr = ref([]);
// 水质分析
const foulContent = ref({});
const initChart = async () => {
  // 接收
  const res1 = await eachFoulPassingService(countryIds.value);
  let passings = res1.data.data;
  const res2 = await basicInfoService(countryIds.value);
  let info = res2.data.data;
  const res3 = await foulAmountService(countryIds.value);
  amount.value = res3.data.data;
  const res4 = await foulDosageService(countryIds.value);
  dosage.value = res4.data.data;
  const res5 = await foulContentService(countryIds.value);
  foulContent.value = res5.data.data;
  // 处理
  for (const key in passings) {
    passing.value = passings[key].toFixed(4) * 100;
  }
  basicInfo.value.sources = info.position.sources.length;
  basicInfo.value.foulFactories = info.position.foulFactories.length;
  basicInfo.value.pressures = info.position.pressures.length;
  basicInfo.value.population = info.population;
  let j = 0;
  amountArr.value.splice(0, amountArr.value.length);
  for (const key in amount.value) {
    let timeStr = xAxisFormatTime(key);
    let a = {
      time: timeStr,
      value: amount.value[key],
    };
    amountArr.value[j] = a;
    j++;
  }
  let i = 0;
  dosageArr.value.splice(0, dosageArr.value.length);
  for (const key in dosage.value) {
    let timeStr = xAxisFormatTime(key);
    let a = {
      time: timeStr,
      value: dosage.value[key],
    };
    dosageArr.value[i] = a;
    i++;
  }
  waterReload();
};

const init = async () => {
  countryIds.value[0] = props.areaId;
  await initArea();
  await initChart();
  await mapReload();
  mapRef.value.addPosition(positions);
};
init();
</script>

<template>
  <div class="lay-container">
    <div class="left">
      <div class="header">
        <h1 style="color: #fff">{{ aName }} {{ bName }} {{ cName }}</h1>
        <el-tag>污水处理达标率 {{ (passing * 10).toFixed(2) }}%</el-tag>
      </div>
      <div class="info">
        <area-basic-info
          :population="basicInfo.population"
          :pressures="basicInfo.pressures"
          :sources="basicInfo.sources"
          :foulFactories="basicInfo.foulFactories"
        ></area-basic-info>
      </div>
      <div class="charts">
        <div class="chart-item">
          <panel title="污水厂"
            ><factory-list :factories="factories"></factory-list
          ></panel>
        </div>
        <div class="chart-item">
          <panel title="污水处理量">
            <amount-chart
              v-if="isWaterSonActive"
              :amount="amountArr"
            ></amount-chart>
          </panel>
        </div>
        <div class="chart-item">
          <panel title="加药量">
            <amount-chart
              v-if="isWaterSonActive"
              :amount="dosageArr"
            ></amount-chart>
          </panel>
        </div>
        <div class="chart-item">
          <panel title="污染物分析">
            <quality-analyze-chart
              v-if="isWaterSonActive"
              typeOf="foul"
              :content="foulContent"
            ></quality-analyze-chart>
          </panel>
        </div>
      </div>
    </div>
    <div class="right">
      <manage-map
        v-if="isMapSonActive"
        ref="mapRef"
        :zoom="13"
        :center="geoCenter"
      ></manage-map>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.lay-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  .left {
    height: 100%;
    width: 60%;
    padding: 8px;
    display: flex;
    flex-direction: column;
    background-color: rgba(29, 43, 86, 1);
    .header {
      margin: 0 auto;
      display: flex;
      align-items: center;
      .el-tag {
        height: 30px;
        width: 200px;
        font-size: 16px;
        margin: auto 15px;
      }
    }
    .info {
      width: 100%;
      margin-top: 3%;
    }
    .charts {
      width: 100%;
      height: 78%;
      margin-top: 3%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .chart-item {
        width: 48%;
        height: 48%;
        h3 {
          font-size: 20px;
          font-weight: normal;
          font-style: normal;
          color: rgb(245, 172, 100);
        }
      }
    }
  }
  .right {
    height: 100%;
    width: 40%;
  }
}
</style>